<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<form class="area" method="post" style="padding-bottom:40px;">

    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">上一步节点</label></dt>
        <dd class="opCon">
            <input type="text" name="pid" id="pid" class="txt" placeholder="请输入上一步节点ID" value="{{scenarioTreeNode['pid']}}">
            <p class="tip"></p>
        </dd>
    </dl>

    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">跳转到节点ID</label></dt>
        <dd class="opCon">
            <input type="text" name="jumpId" id="jumpId" class="txt" placeholder="请输入要跳转节点ID" value="{{scenarioTreeNode['jumpId']}}">
            <p class="tip"></p>
        </dd>
    </dl>

    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">节点类型</label></dt>
        <dd class="opCon" id="ssq">
            <select name="node_type" id="node_type" data='{{scenarioNode['nodeType']}}'>
                <option value="1">
                    顺序节点
                </option>
                <option value="2">
                    分支节点
                </option>
                <option value="3">
                    结束节点
                </option>
                <option value="4">
                    选项节点
                </option>
                <option value="5">
                    幕间过渡效果
                </option>
            </select> 
        </dd>
    </dl>


    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">内容类型</label></dt>
        <dd class="opCon" id="ssq">
            <select name="type" id="type" data='{{scenarioNode['type']}}'>
                <option value="1">
                    视频
                </option>
                <option value="2">
                    图+文+音+角色
                </option>
                <option value="3">
                    对话
                </option>
                <option value="4">
                    电话
                </option>
            </select> 
        </dd>
    </dl>

    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">文本信息</label></dt>
        <dd class="opCon">
            <textarea  id="character" name="character"  style="width: 450px;height: 300px;">{{scenarioNode['character']}}</textarea>
            <p class="tip"></p>
        </dd>
    </dl>

    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">前景图ID</label></dt>
        <dd class="opCon" id="ssq">
            <select name="foregroundImgId" id='foregroundImgId' style="width: 150px" class="select2" data='{{scenarioNode['foregroundImgId']}}'>
                <option value="0">无</option>
                {% for material in imgList %}
                <option value="{{material['id']}}">{{material['name']}}</option>
                {% endfor %}
            </select>
        </dd>
    </dl>

    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">背景图ID</label></dt>
        <dd class="opCon" id="ssq">
            <select name="backgroundImgId" id='backgroundImgId' style="width: 150px" class="select2"  data='{{scenarioNode['backgroundImgId']}}'>
                <option value="0">无</option>
                {% for material in imgList %}
                <option value="{{material['id']}}">{{material['name']}}</option>
                {% endfor %}
            </select>
        </dd>
    </dl>


    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">视频ID</label></dt>
        <dd class="opCon" id="ssq">
            <select name="videoId" id='videoId' style="width: 150px" class="select2" data='{{scenarioNode['videoId']}}'>
                <option value="0">无</option>
                {% for material in videoList %}
                <option value="{{material['id']}}">{{material['name']}}</option>
                {% endfor %}
            </select>
        </dd>
    </dl>


    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">音乐素材ID</label></dt>
        <dd class="opCon" id="ssq">
            <select name="musicId" id='musicId'  style="width: 150px" class="select2" data='{{scenarioNode['musicId']}}'>
                <option value="0">无</option>
                {% for material in musicList %}
                <option value="{{material['id']}}">{{material['name']}}</option>
                {% endfor %}
            </select>
        </dd>
    </dl>

    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">背景音乐</label></dt>
        <dd class="opCon" id="ssq">
            <select name="backgroundMusicId" id='backgroundMusicId'  style="width: 150px" class="select2" data='{{scenarioNode['backgroundMusicId']}}'>
                <option value="0">无</option>
                {% for material in musicList %}
                <option value="{{material['id']}}">{{material['name']}}</option>
                {% endfor %}
            </select>
        </dd>
    </dl>


    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">角色ID</label></dt>
        <dd class="opCon" id="ssq">
            <select  name="roleId" id='roleId'  style="width: 150px" class="select2" data='{{scenarioNode['roleId']}}'>
                <option value="0">无</option>
                {% for role in roleList %}
                <option value="{{role['id']}}">{{role['name']}}</option>
                {% endfor %}
            </select>
        </dd>
    </dl>


    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">是否触发结局</label></dt>
        <dd class="opCon" id="ssq">
            <select  name="isTriggerEnd" id='isTriggerEnd'  data='{{scenarioNode['isTriggerEnd']}}'>
                <option value="0">
                    否
                </option>
                <option value="1">
                    是
                </option>
                <option value="2">
                    日常节点触发彩蛋结局
                </option>
            </select> 
        </dd>
    </dl>


    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">是否复用</label></dt>
        <dd class="opCon" id="ssq">
            <select name="isReuse" id='isReuse'  data='{{scenarioNode['isReuse']}}'>
                <option value="0">
                    否
                </option>
                <option value="1">
                    是
                </option>
            </select> 
        </dd>
    </dl>



    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">是否添加积分</label></dt>
        <dd class="opCon" id="ssq">
            <select name="isAddScore" id='isAddScore'  data='{{scenarioNode['isAddScore']}}'>
                <option value="0">
                    否
                </option>
                <option value="1">
                    是
                </option>
            </select> 
        </dd>
    </dl>


    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">图文显示类型</label></dt>
        <dd class="opCon" id="ssq">
            <select name="showType" id='showType'  data='{{scenarioNode['showType']}}'>
                <option value="1">
                    同时出现
                </option>
                <option value="1">
                    先图后文
                </option>
                <option value="1">
                    先文后图
                </option>
            </select> 
        </dd>
    </dl>

    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">extend</label></dt>
        <dd class="opCon">
            <textarea id="extend" name="extend" style="width: 450px;height: 300px;">{{scenarioNode['extend']}}</textarea>
            <p class="tip"></p>
        </dd>
    </dl>

    <p class="mt20 tc"><input type="button" style="width: 100px; height:30px;" value="提交"   id="edit"  /> <input type="button" style="width: 100px; height:30px;"  value="返回"  class="btn-back"  /></p>
</form>


<input type="hidden" id="ajaxEdit" value="{{url("scenario/ajaxScenarioNodeEdit")}}">

<input type="hidden" id="id" value="{{scenarioTreeNode['id']}}">




<script type="text/javascript">
$(window).load(function () {
    $('.select2').select2({
        theme: "classic"
    });

    $('#edit').click(function () {
        var json = {
            "id": $('#id').val(),
            "pid": $('#pid').val(),
            "jumpId": $('#jumpId').val(),
            "nodeType": $('#node_type').val(),
            "type": $('#type').val(),
            "character": $('#character').val(),
            "foregroundImgId": $('#foregroundImgId').val(),
            "videoId": $('#videoId').val(),
            "musicId": $('#musicId').val(),
            "roleId": $('#roleId').val(),
            "backgroundImgId": $('#backgroundImgId').val(),
            "isTriggerEnd": $('#isTriggerEnd').val(),
            "isReuse": $('#isReuse').val(),
            "isAddScore": $('#isAddScore').val(),
            "showType": $('#showType').val(),
            "extend": $('#extend').val(),
            "backgroundMusicId":$("#backgroundMusicId").val(),
        };
        var successFunction = function (data) {
            if (data.status == 200) {
                alert("修改成功");
                window.location.href = "{{url('scenario/scenarioTreeNode')}}?id={{scenarioTreeNode['forestId']}}";
            } else if (data.status == -1) {
                alert(data.info);
            }
        };
        var errorFunction = function () {

        };
        $.ajax({
            url: $("#ajaxEdit").val(),
            data: json,
            type: "post",
            error: errorFunction,
            success: successFunction
        });
    });




});



</script>
